<template>
	<view class="wrap">
		<!-- 添加/修改人员 -->
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="角色名称:" label-width="150" prop="name">
				<u-input :border="border" type="name" v-model="model.name" placeholder="请输入角色名称"></u-input>
			</u-form-item>

		<view class="checkboxAdmin">
			<view class="checkboxSpan">
				权限管理:
			</view>
			<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox 
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in list" :key="index" 
							:name="item.name"
						>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		</u-form>
		<u-button class="buton" @click="toBack">确定</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				model: {
					name: '',
					likeFruit:'',
					checked:''
				},
				rules: {
					name: [{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.chinese(value);
						},
						message: '姓名必须为中文',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur'],
					}, ],
				},
				list: [
						{
								name: '库存管理',
								checked: false,
								disabled: false
							},
							{
								name: '订单管理',
								checked: false,
								disabled: false
							},
							{
								name: '评价管理',
								checked: false,
								disabled: false
							}
						],
				border: false,
				labelPosition: 'left',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				errorType: ['message'],
			};
		},
		onLoad() {

		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			toBack(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
						uni.navigateBack({
							delta:1
						})
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}

	.buton {
		width: 670rpx;
		height: 80rpx;
		background: #0199FE;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		position: fixed;
		bottom: 24rpx;
		left: 40rpx;
	}
	.checkboxAdmin{
		.checkboxSpan{
			margin-bottom: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
</style>
